<template>
  <div style="padding-bottom:0.3rem" >
	<!-- <div v-if="chenload"> -->
		 <!-- 菜单 -->
		<div class="top-warp">
		  <div class="nav">
		    <div :class="{'active':tabType==0}" @click="changeTab(0)">我的笔记</div>
		    <div :class="{'active':tabType==1}" @click="changeTab(1)">我的评价</div>
		  </div>
		</div>
		
		<!--我的笔记-->
		<mescroll-vue ref="mescroll0" v-show="tabType==0" :up="getMescrollUp(0)" @init="mescrollInit0">
		  <ul id="dataList0">
		    <li class="data-li" v-for="item in tab0.list">
		     <div class="z" @click="biji(item.other_id,item.type)">
		     		<div class="con">
		     			<div class="top">
		     				<div class="toppic">
		     					<img :src="imgurl+item.thumb" alt="">
		     				</div>
		     				<div class="box">
		     					<div class="p1">{{item.name}}</div>
		     					<div class="p2">{{item.tag_name}}</div>
		     				</div>
		     			</div>
		     			<p style="width: 100%;height: 0.02rem;background: #EDEDED;margin-top: 0.3rem"></p>
		     			<div class="zi">
		     				<div class="notetitle">笔记：</div>
		     				<div class="notecontent">
		     					<p v-for="(it,index) in item.contents">{{it | base64Decode}}</p>
		     				</div>
		     			</div>
		     		</div>
		     </div>
		      
		    </li>
		  </ul>
		</mescroll-vue>
		
		<!-- 我的评价-->
		<mescroll-vue ref="mescroll1" v-show="tabType==1" :up="getMescrollUp(1)" @init="mescrollInit1">
		    <ul id="dataList1">
				<li class="data-li" v-for="item in tab1.list">
					<div class="z" @click="pingji(item.other_id,item.type)">
						<div class="con">
							<div class="top">
								<div class="toppic">
								  <img :src="imgurl+item.thumb" alt="">
								</div>
								<div class="box">
									<p class="p1">{{item.name}}</p>
									<p class="p2">{{item.tag_name}}</p>
								</div>
							</div>
							<p style="width: 100%;height: 0.02rem;background: #EDEDED;margin-top: 0.3rem"></p>
					        <div class="zi">
					        	<div class="notetitle">评价：</div>
					        	<div class="notecontent">
					        		<p>{{item.content | base64Decode}}</p>
					        	</div>
					        </div>
						</div>
					</div>
				</li>
		    </ul>
		</mescroll-vue>
	<!-- </div>
	<div class="loadmore" v-else>
		<img src="static/img/load.gif" alt="">
	</div> -->
  </div>
</template>

<script>
   import MescrollVue from 'mescroll.js/mescroll.vue'
   
   export default {
     name: 'Collect',
     components: {
       MescrollVue
     },
     data () {
       return {
				 imgSrc: require("../../assets/img/kongbai.png"),
         tab0: {mescroll: null, list: [], isListInit: false}, // 全部
         tab1: {mescroll: null, list: [], isListInit: false}, // 已付款
         tab2: {mescroll: null, list: [], isListInit: false}, // 未付款
         tabType: 0 ,// 菜单类型
   	    imgurl:this.$store.state.img,
       }
     },
     methods: {
   	  biji(id,type){
   	    if(type=="3"||type==3){
   	        this.$router.push({
   	       path:'/class',
   	       query:{
   	         bid:id
   	       }
   	     })
   	    }else if(type=='2'||type==2){
   	        this.$router.push({
   	       path:'/specialtopic',
   	       query:{
   	         stid:id
   	       }
   	     })
   	    }else if(type=='1'||type==1){
   	        this.$router.push({
   	       path:'/course',
   	       query:{
   	         cid:id
   	       }
   	     })
   	    }
   	  },
   	  pingji(id,type){
   	      if(type=="3"||type==3){
   	        this.$router.push({
   	       path:'/class',
   	       query:{
   	         bid:id
   	       }
   	     })
   	    }else if(type=='2'||type==2){
   	        this.$router.push({
   	       path:'/specialtopic',
   	       query:{
   	         stid:id
   	       }
   	     })
   	    }else if(type=='1'||type==1){
   	        this.$router.push({
   	       path:'/course',
   	       query:{
   	         cid:id
   	       }
   	     })
   	    }
   	  },
   	 
       // mescroll组件初始化的回调,可获取到mescroll对象
       mescrollInit0 (mescroll) {
         mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
         this.tab0.mescroll = mescroll;
       },
       mescrollInit1 (mescroll) {
         mescroll.tabType = 1;
         this.tab1.mescroll = mescroll;
       },
       mescrollInit2 (mescroll) {
         mescroll.tabType = 2;
         this.tab2.mescroll = mescroll;
       },
       
       // 多mescroll的配置,需通过方法获取,保证每个配置是单例
       getMescrollUp (tabType) {
         let emptyWarpId = 'dataList' + tabType;
         return {
           auto: true,
           callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
           noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
           empty: {
             warpId: emptyWarpId, // 父布局的id;
             icon: this.imgSrc, // 图标,默认null
             tip: '您暂未有任何数据', // 提示
             
           },
           
         }
       },
    
       /* 上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
       upCallback (page, mescroll) {
   		var that = this;
         if (mescroll.tabType === 0) {
           // 学习中
            that.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
						that.axios.get(that.$store.state.url +'User/noteList',{
							params:{
								page:page.num,
								limit:page.size
							}
						}).then(res=>{
							// console.log(111)
						 // that.chenload=true;
						 if(res.data.errcode==0||res.data.errcode=='0'){
							 var curPageData = res.data.data.note;
								mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
							 if (page.num === 1) that.tab0.list = []; // 如果是第一页需手动制空列表
							 that.tab0.list = that.tab0.list.concat(curPageData); // 追加新数据
						 }
						})
   		
         } else if (mescroll.tabType === 1) {
           // 学习完成
   		   that.tab1.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
           that.axios.get(that.$store.state.url +'User/commentList',{
           	params:{
           		page:page.num,
           		limit:page.size
           	}
           }).then(res=>{
            // that.chenload=true;
            if(res.data.errcode==0||res.data.errcode=='0'){
           	 var curPageData = res.data.data.comment;
           	  mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
           	 if (page.num === 1) that.tab1.list = []; // 如果是第一页需手动制空列表
           	 that.tab1.list = that.tab1.list.concat(curPageData); // 追加新数据
            }
           })
         }
       },
   
       // 切换菜单
       changeTab (type) {
         let curTab = this.getTabData(this.tabType);// 当前列表
         let newTab = this.getTabData(type);// 新转换的列表
         curTab.mescroll.hideTopBtn(); // 隐藏当前列表的回到顶部按钮
         this.tabType = type // 切换菜单
         if (!newTab.isListInit) {
           newTab.mescroll.triggerDownScroll(); // 加载列表
         } else {
         }
       },
       // 获取菜单对应的数据
       getTabData (tabType) {
         if (tabType == null) tabType = this.tabType;
         if (tabType === 0) {
           return this.tab0;
         } else if (tabType === 1) {
           return this.tab1;
         }
       },
     },
     mounted(){
		 this.sdk.getJSSDK('','',this.$store.state.url);	
   	  
   // 	  this.getMescrollUp(this.tabType);
   // 	  this.getMescrollDown(this.tabType)
     }
     
   }
</script>

<style scoped>
  .mescroll {
    position: fixed;
    top: .88rem;
    bottom: 0;
    height: auto;
  }
  
  .top-warp{
    z-index: 9990;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: .88rem;
    background-color: white;
  }
  .top-warp .head{
    width: 100%;
    height: .88rem;
    line-height: .88rem;
    text-align: center;
  }
  .top-warp .nav{
    text-align: center;
    height: .8rem;
    background: white;
  	box-shadow:0px 3px 5px 0px rgba(71,68,80,0.06);
  	display: flex;
  	justify-content: space-around;
  }
  .top-warp .nav > div{
  	  font-weight: 600;
    line-height: .8rem;
    font-size: .3rem;
  	color: #C2C9D3;
  }
  .top-warp .nav .active{
    border-bottom: 2px solid #0287FF;
    color: #0287FF;
  }
  
  /*展示上拉加载的数据列表*/
  .data-li{
    position: relative;
  	padding-bottom: .3rem;
    border-bottom: 1px solid #EDEDED;
  }
  .z{
    background: #fff;
    width: 100%;
    padding-bottom: 0.3rem;
    margin-top: 0.3rem;
	padding-top: .3rem;
  }
  .z:first-child{
	  margin-top: 0 !important;
  }
  .con{
    width: 92%;
    margin: auto;
  }
  .top{
    width: 100%;
		display: flex;
		justify-content: flex-start;
  }
	.toppic{
		width: 2.1rem !important;
		height: 1.18rem;
		border-radius: 0.08rem;
		overflow: hidden;
	}
  .top .toppic img{
    width: 100%;
    height: 100%;
  }
  .top .box{
	width: 5rem;
    margin-left: 0.21rem;
    /* display: flex;
    flex-wrap: wrap;
    align-content: space-between; */
  }
  .p1{
    font-size:0.28rem;
    color:rgba(51,51,51,1);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
  }
  .p2{
    width:1.53rem;
    height:0.37rem;
    text-align: center;
    background:rgba(255,255,255,1);
    border:0.02rem solid rgba(2,135,255,1);
    border-radius:0.19rem;
    font-size:0.24rem;
    color:rgba(2,135,255,1);
	margin-top: .32rem;
  }
  .zi{
		display: flex;
		justify-content: flex-start;
		margin-top: .1rem;
  }
	.zi .notetitle{
	  font-size: 0.26rem;
    margin-top: 0.1rem;
	  color: #333;
	}
	.zi .notecontent{
		width: 80%;
	}
	.zi .notecontent p{
		width: 100%;
		  font-size: 0.26rem;
		  color: #999;
		padding-bottom: .3rem;
		margin-top: .1rem;
		border-bottom: 1px solid #EDEDED;
		word-break: break-all;
	}
	.zi .notecontent p:last-child{
		border-bottom: none;
	}
  .zi span:nth-child(1){
    font-size: 0.26rem;
    color: #333;
  }
  .zi span:nth-child(2){
    font-size: 0.26rem;
    color: #999;
    line-height: 0.34rem;
  }
  /* .box{
    position: relative;
  } */
</style>
